<template>
  <div class="table-container">
    <div class="table-options">
      <el-button type="primary" :icon="Plus" @click="handleCreate">新增</el-button>
      <el-button type="primary" :icon="Refresh" @click="fetchData" :loading="loading">刷新</el-button>
      <el-button type="primary" :icon="Delete" />
      <el-button type="primary" :icon="Operation">批量管理</el-button>
      <el-button type="primary" :icon="Search">Search</el-button>
    </div>
    <el-table stripe border size="small" :data="tableData" v-loading="loading" style="width: 100%" :header-cell-style="{ background: '#5191efdb', color: '#fff' }">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="orderNum" label="排序" width="100" />
      <el-table-column prop="linkUrl" label="打开链接" width="280" />
      <el-table-column prop="createTime" label="发布时间" />
      <el-table-column prop="isEnabled" label="状态" width="80">
        <template #default="scope">
          <span v-if="scope.row.isEnabled">启用</span>
          <span v-else>停用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-button type="primary" :icon="Edit" size="small" text @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
            <el-popconfirm class="box-item" title="你确定删除该数据" @confirm="handleRemove(scope.row, scope.$index)" placement="top">
              <template #reference>
                <el-button type="danger" size="small" text :icon="Delete"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination layout="total,prev, pager, next, jumper" :total="totalCount" :page-size="listQuery.pageSize" @change="handlePageChange" />
    </div>
    <EditView ref="refEditView" @create="fetchData" @update="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import { Plus, Delete, Edit, Search, Operation, Refresh } from '@element-plus/icons-vue'
import { ElIcon, ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { fetchList, remove } from '@/apis/banner'
import EditView from './edit.vue'

const tableData = reactive<any>([])
const listQuery = ref({
  page: 1,
  pageSize: 20
})

const totalCount = ref(0) // 假设总数据数为100

const loading = ref(false)

const fetchData = () => {
  loading.value = true
  fetchList(listQuery.value)
    .then((res) => {
      let { result, code, message } = res.data
      if (code !== 200) {
        ElMessage.error(message || '请求失败')
        return
      }
      totalCount.value = result.total
      // console.log(result)
      tableData.splice(0, tableData.length, ...result.items)
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 1000)
    })
}
const refEditView = ref(null)

const handlePageChange = (page: number, pageSize: number) => {
  listQuery.value.page = page
  listQuery.value.pageSize = pageSize
  fetchData()
}

onMounted(async () => {
  fetchData()
})

const handleCreate = (row: any, index: number) => {
  ;(refEditView.value as any).handleCreate()
}
const handleEdit = (row: any, index: number) => {
  ;(refEditView.value as any).handleModify(row)
}
const handleRemove = (row: any, index: number) => {
  // 处理删除逻辑
  remove(row.id)
    .then((response) => {
      let { code, message } = response.data
      if (code !== 200) {
        throw new Error(message || '删除失败')
      }
      // 删除成功后重新获取数据
      fetchData()
    })
    .catch((error) => {
      console.error('删除失败:', error)
    })
}
</script>

<style scoped>
.table-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
}
.el-table {
  flex: 1;
  overflow-y: auto;
}
.table-options {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.table-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 0px;
}
</style>
